<template>
  <Header :title="{ zh: '电脑针车目视管理看板', en: 'Computer Stitching Visual Board', index: 8 }" />

  <div class="EchartsContainer">
    <div class="row" style="height: 28vh">
      <div class="item">
        <div class="title">大底库存明细</div>
        <el-table border style="margin-top: 10px" :data="transData">
          <el-table-column v-for="(item, index) in transTitle" :label="item" :key="index" align="center">
            <template #default="scope">
              {{ scope.row[index] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <swiper :autoplay="{
      delay: 60000
    }" :slides-per-view="1" :space-between="2000" style="height: calc(100vh - 34vh - 40px)">
      <swiper-slide>
        <div class="row" style="margin-top: 10px; width: 100%; height: 100%">
          <div class="item">
            <div class="title">月生产状况</div>
            <div class="echarts" id="main"></div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="row" style="margin-top: 10px; width: 100%; height: 100%">
          <div class="item" style="padding-top: 20px">
            <div class="echarts" id="main3"></div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import Header from '../components/Header.vue'
import * as echarts from 'echarts'
import { OutsoleInventory } from '@/api/Nine'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import { Swiper, SwiperSlide } from 'swiper/vue'

const chartData = ref([
  {
    xData: [],
    data: [],
    inQty: [],
    ordQty: []
  },
  {
    xData: [],
    data: []
  }
]) as any
const getDeptTypes = async () => {
  // try {
  //   let tableDataList = (await request.put<any, any>(
  //     `/DeptMgt/deptTemp/back?deptType=${'针车'}`
  //   )) as any
  //   console.log(tableDataList)
  //   tableDataList.forEach((item: any) => {
  //     DeptNos.value.push(item.deptNo)
  //   })
  // } catch (error: any) {
  //   ElMessage.error(error)
  // }
}

const getData = async () => {
  // 获取月生产状况


  // 获取最后一张图数据
  // try {
  //   let tableDataList = (await request.post<any, any>(
  //     `/macMgt/show/query/showMonQuery?macType=${'针车'}&macName=${''}`,
  //     DeptNos.value
  //   )) as any
  //   tableDataList.forEach((item: any) => {
  //     chartData.value[1].xData.push(item.reDate)
  //     chartData.value[1].data.push(item.rate)
  //   })
  //   console.log(chartData.value)
  // } catch (error: any) {
  //   ElMessage.error(error)
  // }
}

const DeptNos = ref([]) as any

// 大底库存明细
const OutsoleInventoryTableDate = ref<any>([])
const OutsoleInventoryMethods = async () => {
  // try {
  //   const result = await OutsoleInventory()

  //   OutsoleInventoryTableDate.value = result.map((item: any) => {
  //     const { start, end, rate } = item
  //     return { start, end, rate }
  //   })

  //   transTitle.value = result.map((item1: any, index: number) => {
  //     return item1.macName
  //   })
  //   transTitle.value.unshift('机台')
  //   TableDateMehtods()
  //   console.log(tableData.value)
  // } catch (error: any) {
  //   ElMessage.error(error)
  // }
}

const transData = ref([])

const transTitle = ref<any>([])

const TableDateMehtods = () => {
  // 数组按矩阵思路, 变成转置矩阵
  let matrixData = OutsoleInventoryTableDate.value.map((row: any) => {
    let arr = []
    for (let key in row) {
      arr.push(row[key])
    }
    return arr
  })
  // 加入标题拼接最终的数据
  transData.value = matrixData[0].map((col: any, i: any) => {
    return [
      tableData.value[i],
      ...matrixData.map((row: any) => {
        return row[i]
      })
    ]
  })
}

onMounted(async () => {
  // day()
  OutsoleInventoryMethods()

  await getDeptTypes()

  await getData()
  getEchartsDom()
})

// 表格数据
const tableData = ref<any>(['开机时间', '停顿时间', '稼动率'])

// const day = () => {
// // 获取当前日期
// const today = new Date();
// // 获取当前月份
// const currentMonth = today.getMonth();
// // 获取当前年份
// const currentYear = today.getFullYear();

// // 遍历本月的每一天
// for (let day = 1; day <= new Date(currentYear, currentMonth + 1, 0).getDate(); day++) {
//     // 创建一个新的日期对象，‌表示本月的某一天
//     const date = new Date(currentYear, currentMonth, day);
//     // 打印出每一天的日期
//     MontDay.value.push(date.getDate())

// }
// console.log(MontDay.value)
// }

const getEchartsDom = () => {
  let chartDom = document.getElementById('main')
  let myChart = echarts.init(chartDom)
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: {
      left: 80,
      right: 80,
      top: 30,
      bottom: 45
    },
    legend: {
      data: ['目标产量', '实际产量', '达成率'],
      top: 'bottom'
    },
    xAxis: [
      {
        type: 'category',
        data: chartData.value[0].xData,
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 20000,
        interval: 4000,
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: '{value} %'
        }
      }
    ],
    series: [
      {
        name: '目标产量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        data: chartData.value[0].ordQty
      },
      {
        name: '实际产量',
        type: 'bar',
        tooltip: {
          valueFormatter: function (value: any) {
            return value
          }
        },
        data: chartData.value[0].inQty
      },
      {
        name: '达成率',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function (value: any) {
            return value + ' %'
          }
        },
        data: chartData.value[0].data
      }
    ]
  }
  option && myChart.setOption(option)

  // 第三张图
  let chartDom3 = document.getElementById('main3')
  let myChart3 = echarts.init(chartDom3)
  let option3 = {
    legend: {
      data: ['稼动率']
    },
    xAxis: {
      type: 'category',
      data: chartData.value[1].xData
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis'
    },
    series: [
      {
        name: '稼动率',
        data: chartData.value[1].data,
        type: 'line',
        label: {
          show: true,
          position: 'top'
        },
        color: '#93BEFF'
      }
    ]
  }
  option3 && myChart3.setOption(option3)
}

onMounted(() => {
  function One() {
    if (location.href.indexOf('#reloaded') == -1) {
      location.href = location.href + '#reloaded'
      location.reload()
    }
  }
  One()
})
</script>

<style scoped lang="less">
.EchartsContainer {
  border-radius: 4px;
  margin-top: 10px;
  width: 100%;
  height: calc(100vh - 7vh - 40px);
}

.row {
  display: flex;
  height: 50%;
  width: 100%;

  .item {
    background-color: white;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 20px !important;
    padding: 0 10px 5px;

    // align-items: center;
    .title {
      font-weight: 900;
      font-size: 1rem;
      margin-top: 10px;
      text-align: center;
      color: black;
    }

    .echarts {
      flex: 1;
    }
  }
}

:deep(thead) {
  .is-center {
    color: white;
    background-color: #ff9940;
  }
}
</style>
